<script lang="ts" setup>
//import { getExampleTableApi } from './mock-api';
//import { message } from 'ant-design-vue';
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { listStation} from '#/api/gis/station';
import { useVbenModal, VbenButton } from '@vben/common-ui';
import AddExtraModal from './add-modal.vue';
import EditExtraModal from './edit-modal.vue';
import ConfirmExtraModal from './confirm-modal.vue';
import ListDetailsModal from './listDetails-modal.vue';


interface RowType {
  id: number;
  stationCode: string;
  stationName: string;
  pipelineName: string;
  pipelineId: number;
  remark: string;
  location: string
}

// 定义一个Modal组件 用于添加的模态框。
const [AddModal, AddmodalApi] = useVbenModal({
  //连接抽离的组件
  connectedComponent: AddExtraModal,
  footer:false,
});
// 定义一个Modal组件 用于编辑的模态框。
const [EditModal, EditmodalApi] = useVbenModal({
  connectedComponent: EditExtraModal,
  footer:false,
});

//定义一个用于删除确定的模态框
const [ConfirmModal, ConfirmmodalApi] = useVbenModal({
  connectedComponent: ConfirmExtraModal,
  contentClass: 'min-h-10',
  closeOnPressEscape:true,
  bordered:false,
});
//定义一个查看详情的模态框
const[ListModal,ListmodalApi] = useVbenModal({
  connectedComponent: ListDetailsModal,
  footer:false,
});

//打开添加模态框
function openAddModal() {
  AddmodalApi.open();
}
// 打开修改模态框
function openEditModal(row: RowType) {
  EditmodalApi
    .setData({
      data: row,
    });
  console.log("编辑的行数据为：", row);
  EditmodalApi.open();
}

//删除
function deleteRow(row: RowType) {
  ConfirmmodalApi
    .setData({
      data: row,
    });
    console.log("删除的行数据为：", row);
  ConfirmmodalApi.open();
}
//查看详情
function ListDetails(row: RowType){
  ListmodalApi
    .setData({
      data: row,
    });
    console.log("查看详情的行数据为：", row);
  ListmodalApi.open();
}


const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入转油站编号',
      },
      fieldName: 'stationCode',
      label: '转油站编号：',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入转油站名称',
      },
      fieldName: 'stationName',
      label: '转油站名称：',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50},
    { field: 'stationCode', title: '转油站编号',width: 200  },
    { field: 'stationName', title: '转油站名称',width: 200  },
    { field: 'pipeCode', title: '关联管线编号',width: 200  },
    { field: 'location', title: '坐标' },
    { field: 'remark', title: '备注' },
    { slots: { default: 'action' }, title: '操作' },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        console.log("查询参数:", formValues);
        return await listStation({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
  formOptions,
});

// 定义刷新表格数据的方法1
function refreshTable() {
  //等待10毫秒再执行刷新表格数据的方法
  setTimeout(() => {
    gridApi.reload();
  }, 100);
}
// 监听子组件的自定义事件 2
const handleRefreshTable = () => {
  refreshTable();
};
</script>


<template>
  <div>
    <div class="spacing">
      <!-- 3 -->
      <AddModal @refreshTable="handleRefreshTable" />
      <EditModal @refreshTable="handleRefreshTable" />
      <ConfirmModal @refreshTable="handleRefreshTable" />
      <VbenButton @click="openAddModal">添加</VbenButton>
      <ListModal/>
    </div>
    
    <div class="vp-raw w-full">
      <Grid>
        <template #action="{ row }">
          <button style="color:#007bff;margin-right: 10px;" @click="ListDetails(row)">查看详情</button>
          <button style="color:#007bff;margin-right: 10px;" @click="openEditModal(row)">编辑</button>
          <button style="color:#007bff;margin-right: 10px;" @click="deleteRow(row)">删除</button>
        </template>
      </Grid>
    </div>
  </div>


</template>

<style scoped>
.spacing {
  margin: 10px;
}
.custom-modal-content {
  height: 30px 
}

</style>
